<template>
	<zw-dialog :hidden="hidden" title="修改密码" :width="450" :height="320" :showHeaderBg="false" :hideFooter="false"
	 :showFooterBg="false" borderRadius @close="closeDialog" @cancel="closeDialog" @confirm="submit">
		<view class="form-wrap" @keydown.enter="submit">
			<view class="form-item-title">原密码</view>
			<view class="form-item">
				<input placeholder="输入原密码" password v-model="oldPassword" />
			</view>
			<view class="form-item-title">新密码</view>
			<view class="form-item">
				<input placeholder="输入新密码" password v-model="newPassword" />
			</view>
			<view class="form-item">
				<input placeholder="重复新密码" password v-model="repeatPassword" />
			</view>
			<view class="form-item-title">验证码</view>
			<view class="form-item">
				<input placeholder="手机验证码" maxlength="6" v-model="captcha" />
				<view class="phone_right" @click="checkPhone"><text>{{btntxt}}</text></view>
				<!-- <image class="captcha" :src="`${$util.baseUrl}/security/captcha?key=${random}`" title="点击刷新" @click="getRandom"></image> -->
			</view>
		</view>
	</zw-dialog>
</template>

<script>
	export default {
		props: {
			hidden: true
		},
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				repeatPassword: '',
				captcha: '',
				random: '',
				check:false,
				showContent:'',
				btntxt: '获取验证码',
				seconds: 60,
				disabled: false,
				userInfo:{}
			}
		},
		created() {
			this.getRandom();
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			getRandom() {
				this.random = this.$util.getRandomStr();
			},
			closeDialog() {
				this.$emit('update:hidden', true);
			},
			//发送验证码
			checkPhone() {
				var that = this;
				
				if(that.disabled){
					return
				}
				
				uni.showLoading({
					mask:true,
					title:'验证码发送中'
				})
				uni.request({
					url: that.serverUrl + "/user/userLogin/getValidateCode",
					method: 'POST',
					data: {
						phone: that.userInfo.phone
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							if (that.userInfo.phone) {
								uni.showToast({
									title: '验证码已发送',
									icon: "none"
								});
								that.btntxt = that.seconds + '秒后再试';
								that.seconds--;
								that.disabled = true;
								const timer = setInterval(() => {
									that.btntxt = that.seconds + '秒后再试';
									that.seconds--;
									that.disabled = true;
									if (that.seconds === 0) {
										clearInterval(timer);
										that.btntxt = '获取验证码';
										that.seconds = 60;
										that.disabled = false;
									}
								}, 1000);
								
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			submit() {
				if (!this.checkForm()) return;
				uni.showLoading({
					title: '处理中...',
					mask: true
				});
				this.uni_request({
					url:'/user/userInfo/updPassword',
					method:'PUT',
					data:{
						newPassword:this.newPassword,
						validateCode:this.captcha
					},
					success:(res) => {
						uni.hideLoading()
						if(res.data.code == 0 || res.data.code == 200){
							this.$alert('密码修改成功！', {
								cancelText: '返回首页',
								confirmText: '重新登录'
							}, () => {
								this.closeDialog();
								uni.navigateTo({
									url: '/pages/user/login/index'
								});
							}, () => {
								this.closeDialog();
								uni.navigateTo({
									url: '/pages/index'
								});
							});
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
					}
				})
				
				
			},
			checkForm() {
				// if (!this.$regular.password.test(this.oldPassword)) {
				// 	return this.$util.showErrorMsg('原密码错误');
				// }
				// if (!this.$regular.password.test(this.newPassword)) {
				// 	return this.$util.showErrorMsg('新密码格式错误');
				// }
				if (!this.repeatPassword) {
					return this.$util.showErrorMsg('请输入原密码');
				}
				if (!this.newPassword) {
					return this.$util.showErrorMsg('请输入新密码');
				}
				if (this.repeatPassword != this.newPassword) {
					return this.$util.showErrorMsg('新密码输入不一致');
				}
				if (!this.captcha) {
					return this.$util.showErrorMsg('请输入验证码');
				}
				if (this.captcha.length != 6) {
					return this.$util.showErrorMsg('验证码错误');
				}

				return true;
			}
		}
	}
</script>

<style lang="scss">
	.form-wrap {
		width: 100%;
		margin: 0 20px;
		padding: 30px 40px 0;
		border-top: 1px solid $border-color;

		.form-item-title {
			font-size: 15px;
			color: #555;
			font-weight: bold;
			line-height: 30px;
		}

		.form-item {
			@extend %flex-align-center;
			margin-bottom: 10px;
			input {
				flex: 1;
				height: 40px;
				line-height: 40px;
				padding: 0 10px;
				color: #333;
				border: 1px solid #e8e8e8;
			}

			.phone_right {
				width: 85px;
				height: 42px;
				line-height:42px;
				margin-left: 15px;
				cursor: pointer;
			}
			.phone_right:hover{
				color: #e93323;
			}
		}
	}
</style>
